<script setup>
import {
  ref,
  computed,
  watchEffect,
  onMounted,
  nextTick,
  defineProps,
  defineEmits,
  onUpdated,
  // to do
} from 'vue'

// 组件中接变量
const props = defineProps({
  counter: Number
})

// 组件中接自定义事件
const emit = defineEmits(['add'])

// // 当成beforeCreated用

// const counter = ref(0)
// const counterSqrt = computed(() => counter.value ** 2)

// const aa = ref(null)

// watchEffect(() => {
//   console.log(counter.value)
// })

// function add () {
//   counter.value++
// }

// // 当成created用
// console.log(aa.value);

// onMounted(() => {
//   console.log(aa.value);
// })

onUpdated(async () => {
  await nextTick()
  console.log(document.querySelector('h2').innerText);
})

const color = ref('red')

function changeColor () {
  emit('add')
  if (props.counter % 2 === 0) {
    color.value = 'red'
  } else {
    color.value = 'green'
  }
}

</script>

<template>
  <div>
    <h1 class="aa" ref="aa">{{ counter }}</h1>
    <input v-focus type="text">
    <!-- <h1>{{ counterSqrt }}</h1> -->
    <button type="button" @click="changeColor">+1</button>
  </div>
</template>

<style>
h1 {
  color: v-bind(color) !important;
}
</style>
